<template>
  <h1>{{ name }}</h1>
  <h1>{{ age }}</h1>
  <h1>{{ job.type }}</h1>
  <h1>{{ job.salary }}</h1>
  <h1>{{ job2.type }}</h1>
  <h1>{{ job2.salary }}</h1>
  <h1>{{ hobby }}</h1>
  <button @click="sayHello">说话</button>
  <button @click="changeData">改数据</button>
</template>

<script>
import {reactive, ref} from "vue";//引入ref实现响应式
export default {
  name: 'App',
  components: {},

  setup() {
    let name = ref('张三')
    let age = 18

    let job = ref({
      type: '前端工程师',
      salary: '30k'
    })
    let job2 = reactive({
      type: '后端工程师',
      salary: '20k'
    })
    let hobby = ['抽烟', '喝酒', '烫头']

    function sayHello() {
      alert(`我叫${name.value},我今年${age}`)
      console.log(name, age, job)
    }

    function changeData() {
      name.value = '曾宇杰'
      age = 19
      job.value.type = '后端工程师'  //使用ref需要用.value
      job.value.salary = '50k'
      job2.type = 'UI设计师' //使用reactive之后不用.value
      job2.salary = '80k'
      hobby[0] = '敲代码'  //Vue3支持直接修改下标,也可以被监测
    }

    //将数据交出去
    return {
      name,
      age,
      sayHello,
      changeData,
      job,
      job2,
      hobby
    }
  }

}
</script>

<style>

</style>
